<template>
    <div>
        <div class="divBar" />
        <h5 class="titleInfo">特色服务</h5>
        <el-form ref="form3" class="form" :model="form3" disabled label-width="180px">
            <el-row>
                <el-col :span="13">
                    <el-form-item label="环境设施（最多选3种）" prop="envir">
                        <el-checkbox-group v-model="form3.envir" :min="1" :max="3">
                            <el-checkbox
                                v-for=" city in cities"
                                :key="city.id"
                                :label="city.id"
                            >{{ city.name }}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-col>

                <el-col :span="13">
                    <el-form-item label="特色服务（最多选3种）" prop="char">
                        <el-checkbox-group v-model="form3.char" :min="1" :max="3">
                            <el-checkbox
                                v-for=" server in servers"
                                :key="server.id"
                                :label="server.id"
                            >{{ server.name }}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-col>

                <el-col :span="13">
                    <el-form-item label="个性服务（最多选3种）" prop="per">
                        <el-checkbox-group v-model="form3.per" :min="1" :max="3">
                            <el-checkbox
                                v-for=" personaly in personalies"
                                :key="personaly.id"
                                :label="personaly.id"
                            >{{ personaly.name}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-col>
                <!-- 商户标签 -->
                <el-col :span="13">
                    <el-form-item label="商户标签（最多选3种）" prop="mer">
                        <el-checkbox-group v-model="form3.mer" :min="1" :max="3">
                            <el-checkbox
                                v-for=" Merchants in MerchantList"
                                :key="Merchants.id"
                                :label="Merchants.id"
                            >{{ Merchants.name}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- <el-form-item>
            <el-button
              style="margin:30px 0"
              type="primary"
              @click="submitChar('form3')"
            >保存</el-button>
            </el-form-item>-->
        </el-form>
    </div>
</template>
<script>
import { getChar, getCharSer } from "@/api/shopMange";

export default {
    data() {
        return {
            form3: {
                envir: [],
                char: [],
                per: [],
                mer: []
            },
            cities: [], // 特色服务选项
            servers: [],
            personalies: [],
            MerchantList: [],
            rules3: {
                envir: [{ required: true, message: "请选择环境设施" }],
                char: [{ required: true, message: "请选择特色服务" }],
                per: [{ required: true, message: "请选择个性分类" }]
            }
        };
    },
    created() {
        this.getChar();
    },
    mounted() {
        this.getCharData();
    },
    methods: {
        // 提交特色服务
        // submitChar(e) {
        //   this.$refs[e].validate(valid => {
        //     if (valid) {
        //       const arry = [
        //         this.form3.envir,
        //         this.form3.char,
        //         this.form3.per
        //       ]
        //       charSer({ serviceData: arry }).then(res => {
        //         if (res.data.code == 200) {
        //           this.$message({
        //             message: res.data.msg,
        //             type: 'success'
        //           })
        //         }
        //       })
        //     } else {
        //       this.$message({
        //         message: '有必填项没填，不能提交咯',
        //         type: 'warning'
        //       })
        //       return false
        //     }
        //   })
        // },
        // 获取特色服务
        getChar() {
            getCharSer().then(res => {
                if (res.data.data) {
                    const arr = [];
                    const arr1 = [];
                    const arr2 = [];
                    // const arr3 = [];
                    res.data.data.forEach(item => {
                        if (item.type == 1) {
                            arr.push(item);
                        }
                        if (item.type == 2) {
                            arr1.push(item);
                        }
                        if (item.type == 3) {
                            arr2.push(item);
                        }
                        // if (item.type == 4) {
                        //     arr3.push(item);
                        // }
                        this.cities = arr;
                        this.servers = arr1;
                        this.personalies = arr2;
                        // this.MerchantList = arr3;
                    });
                    this.MerchantList = res.data.icon;
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: "warning"
                    });
                }
            });
        },
        getCharData() {
            let id = this.$route.query.id;

            getChar({ shop_id: id }).then(res => {
                if (res.data.code == 200 && res.data.data) {
                    const arr = [];
                    const arr1 = [];
                    const arr2 = [];
                    const arr3 = [];
                    res.data.data.forEach(item => {
                        if (item.type == 1) {
                            arr.push(item.id);
                        }
                        if (item.type == 2) {
                            arr1.push(item.id);
                        }
                        if (item.type == 3) {
                            arr2.push(item.id);
                        }
                        // if (item.type == 4) {
                        //     arr3.push(item.id);
                        // }
                        this.form3.envir = arr;
                        this.form3.char = arr1;
                        this.form3.per = arr2;
                        // this.form3.mer = arr3;
                    });
                    if (res.data.icon) {
                        res.data.icon.forEach(item => {
                            if (item * 1 > 0) {
                                this.form3.mer.push(item * 1);
                            }
                        });
                    }
                    // this.form3.mer = res.data.icon;
                    // this.form3.mer.forEach((item, index) => {
                    //     this.form3.mer[index] = parseInt(this.form3.mer[index]);
                    // });
                }
            });
        }
    }
};
</script>
<style scoped>
.el-checkbox {
    margin-left: 30px;
    width: 150px;
}
</style>